<template>
  <el-card class="DCardDataChart">
    <div class="f16333 lh32">{{ txt[type].t || "" }}</div>

    <el-row v-if="type !== 'robot'" class="d-row">
      <el-col :span="12">
        <div class="f14999">{{ txt[type].t1 || "" }}</div>
        <div class="f18333">{{ const_1 }}</div>
      </el-col>
      <el-col :span="12">
        <div class="f14999">{{ txt[type].t2 || "" }}</div>
        <div class="f18333">{{ const_2 }}</div>
      </el-col>
    </el-row>
    <div v-else>
      <el-row class="d-row">
        <el-col v-for="(item, index) in d.taskDate" :key="index" :span="8">
          <div class="f14999">{{ item.name || "" }}</div>
          <div class="f18333">{{ item.value }}</div>
        </el-col>
      </el-row>
    </div>

    <!-- chart -->
    <v-chart v-if="type === 'robot'" autoresize style="height: 272px" ref="chart" />
  </el-card>
</template>

<style lang="scss" scoped>
.DCardDataChart {
  .d-row {
    line-height: 30px;
    margin: 20px 0;
  }
}
</style>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
const chart = ref<any>(null)

const txt: { [key: string]: any } = {
  user: {
    t: "用户数据",
    t1: "用户总数",
    t2: "今日用户进入数"
  },
  robot: {
    t: "机器人使用数据",
    t1: "生成数",
    t2: "交互量",
    t3: "交互量"
  }
}

interface Props {
  type?: string
  const_1?: number
  const_2?: number
  robotData?: any
}
const props = withDefaults(defineProps<Props>(), {
  type: "user",
  robotDat: {}
})

console.log(props, "item.name")

// mock
const d = reactive<any>({
  taskDate: [
    {
      name: "AI·生图",
      key: "robotuser_image_count",
      value: props.robotData?.robotuser_image_count || 0
    },
    {
      name: "AI·语音",
      key: "robotuser_chat_count",
      value: props.robotData?.robotuser_tts_count || 0
    },
    {
      name: "AI·聊天",
      key: "robotuser_tts_count",
      value: props.robotData?.robotuser_chat_count || 0
    }
  ]
})

//
const initEcharts = () => {
  d.taskDate.forEach((e: any) => {
    if (e.name === "AI·生图") {
      e.value = props.robotData?.robotuser_image_count
    }
    if (e.name === "AI·语音") {
      e.value = props.robotData?.robotuser_tts_count
    }
    if (e.name === "AI·聊天") {
      e.value = props.robotData?.robotuser_chat_count
    }
  })
  // 多列柱状图
  const mulColumnZZTData = {
    // 图例文字
    legend: {
      data: ["AI·生图", "AI·语音", "AI·聊天"],
      icon: "circle", //圆点展示
      bottom: "0%",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    grid: {
      left: "0%", //图表距离容器左侧多少距离
      right: "1%", //图表距离容器右侧侧多少距离
      bottom: "0%", //图表距离容器上面多少距离
      top: 50, //图表距离容器下面多少距离
      containLabel: true //防止标签溢出
    },
    series: [
      {
        type: "pie",
        // radius: ['50%', '70%'],
        center: ["50%", "40%"],
        avoidLabelOverlap: false,
        color: ["#73DBFF", "#3285EF", "#E56268"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: false
        },
        data: d.taskDate //数据
      }
    ]
  }
  chart.value.setOption(mulColumnZZTData)
}

watch(
  () => props.robotData,
  () => {
    initEcharts()
  }
)

onMounted(() => {
  if (props.type === "robot") {
    initEcharts()
  }
})
</script>
